<template>
  <div>
    <el-dialog v-dialogDrag class="tiny-mce-dialog" :close-on-press-escape = "true" :show-close = 'false' center :modal="false" :title="ruleForm.carOwnerId ? '编辑车辆':'添加司机'" width="360px" :visible.sync="isShow" @close="cancel" :close-on-click-modal="false">
          <el-card class="box-card">
          <el-row :gutter="24" >
            <el-col :span="24">
              <div style="margin-top: 15px;">
                <el-input placeholder="请输入手机号" v-model="phone" clearable maxlength="11" @keyup.enter.native="toQueryInfo" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="toQueryInfo">搜 索</el-button>
                </el-input>
              </div>
            </el-col>
            <el-col :span="24">
              <div style="margin: 25px;">
                <span   style="font-size: 20px;margin: 0 50px 0 0;">{{ matchData.name }}</span>
                <span  style="font-size: 20px;">{{ matchData.username }}</span>
              </div>
              <div style="margin: 25px;">
              <el-checkbox v-model="checked">同意生成电子合同《合同详情》</el-checkbox>
              <el-checkbox v-model="checked">已阅读《合同须知》</el-checkbox>
              </div>
            </el-col>
          </el-row>
          </el-card>
      <div slot="footer" style="text-align:right" class="dialog-footer">
        <el-button type="primary" v-if= "this.item.falg" size="mini" v-loading.fullscreen.lock="fullscreenLoading" @click="save">确定添加</el-button>
        <el-button type="info" size="mini" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: 'DriverStaff',
  props: ['showFormPanel', 'item'],
  data () {
    return {
      phone: null,
      matchData:{},
      showOperation:false,
      fullscreenLoading: false,
      customVal: {imgName: ''},
      showTreeDialog: false,
      selectOrgExpandAll: false,
      ruleForm: this.item,
      roleOptions: [],
      isShow: this.showFormPanel
    }
  },
  filters: {
    formatStatus: function (val) {
      if (val === 'LOCK') {
        return false
      } else if (val === 'NORMAL') {
        return true
      }
      return '-'
    }
  },
  methods: {
    toQueryInfo() {
      let self = this
      if (!self.phone || self.phone.length != 11){
        self.$message({
          message: '请输入11位手机号',
          type: 'warning'
        })
        return
      }
      self.$http.get("/api/driverList/findDriverUser?phone=" + self.phone).then(function(value) {
        if (value.ok){
          if (!value.data.name){
            self.$message({
              message: '没有搜索该司机',
              type: 'warning'
            })
            return
          }
          self.matchData = value.data
        }
      })
    },
    selectVehicleType (val) {
      if (!val){
        this.ruleForm.typeName = null
        return
      }
      let obj = {}
      obj = this.vehicleTypes.find((item) => {
        return item.id === val
      })
      this.ruleForm.typeName = obj.name
    },
    save () {
      let self = this
      if (!self.matchData.userId) {
        self.$message({
          message: '请搜索该司机',
          type: 'warning'
        })
        return
      }
      let par ={
        userId: self.matchData.userId
      }
      self.$http.post('/api/driverList/add', par)
          .then(function (res) {
            self.fullscreenLoading = false
            self.cancel()
            self.$emit('refreshList')
          }).catch(function (error) {
            self.fullscreenLoading = false
            console.log(error)
      })
    },
    cancel (){
      this.isShow = false
      this.$emit('update:showFormPanel', this.isShow)
    }
  },
  mounted: function () {
  },
  components: {
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 15px;
}
.mark-body{
  position:fixed;
  left:0px;
  top:0px;
  background:rgba(0, 0, 0, 0.18);
  width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height:100%;
  filter:alpha(opacity=60);  /*设置透明度为60%*/
  opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
  z-Index:999;
}
aside {
  /* background: #eef1f6; */
  /* padding: 6px 5px; */
  background: none;
  padding: 0px 24px;
  margin-bottom: 1px;
  border-radius: 2px;
  display: block;
  /* line-height: 50px; */
  /* font-size: 48px; */
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  color: #2c3e50;
  /* -webkit-font-smoothing: antialiased; */
  -moz-osx-font-smoothing: grayscale;
}
</style>
